<template>
	<sw-common-frame :loading="loading">
		<template slot="query">
			<el-form size="small" :inline="true">
				<el-form-item>
					<el-input placeholder="请输入姓名" v-model="queryData.createName" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入账号" v-model="queryData.createAccount" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入描述" v-model="queryData.description" clearable style="width: 150px"></el-input>
				</el-form-item>
				<el-form-item>
					<el-select v-model="queryData.smallModule" clearable placeholder="请选择业务模块" style="width: 150px">
						<el-option v-for="(item, index) in enumData" :key="index" :label="item.msg" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-date-picker
						v-model="dateTimeRange"
						type="datetimerange"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期"
						style="width: 340px"
					></el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryTableData()">搜索</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="table">
			<el-table size="medium" :data="tableData" height="100%" stripe>
				<el-table-column prop="createAccount" label="姓名和账号" min-width="180" show-overflow-tooltip>
					<template slot-scope="{ row }">{{ row.createName }} ({{ row.createAccount }})</template>
				</el-table-column>
				<el-table-column prop="description" label="描述" min-width="180" show-overflow-tooltip></el-table-column>
				<el-table-column label="业务模块" min-width="136" :formatter="returnModuleName"></el-table-column>
				<el-table-column prop="actionUrl" label="http方法" min-width="160" show-overflow-tooltip></el-table-column>
				<el-table-column label="日志等级" min-width="80" :formatter="returnLogLevel"></el-table-column>
				<el-table-column prop="ipAddr" label="IP地址" min-width="100"></el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="160"></el-table-column>
				<el-table-column label="操作" width="56">
					<template slot-scope="{ row }">
						<el-button size="medium" type="text" @click="handleLookDetail(row)">详细</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
		<log-detail v-model="detailDialog" :data="detailData"></log-detail>
	</sw-common-frame>
</template>

<script>
import logDetail from './detail';
import systemMixins from '@/views/common/systemMixins';
import { getLogEnumList, getLogPageList } from '@/api/system/tbSysLog';
export default {
	mixins: [systemMixins],
	components: { logDetail },
	data() {
		return {
			enumData: [],
			detailData: {},
			dateTimeRange: [],
			detailDialog: false
		};
	},
	mounted() {
		this.getLogEnumData();
	},
	methods: {
		async getLogEnumData() {
			let result = await getLogEnumList().then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				this.enumData = datas.smallModule;
			}
		},

		//格式化日志请求参数
		formatLogParams() {
			let params = { ...this.queryData };
			if (this.dateTimeRange.length > 0) {
				params['startTime'] = new Date(this.dateTimeRange[0]).getTime();
				params['endTime'] = new Date(this.dateTimeRange[1]).getTime();
			}
			return params;
		},

		//获取日志数据
		async getTableData() {
			let params = this.formatLogParams();
			let result = await getLogPageList(params).then((res) => res.data);
			this.loading = false;
			if (result.code === '0') {
				this.dataCount = parseInt(result.count);
				this.tableData = result.data || [];
			}
		},

		//格式化模块名称
		returnModuleName(data) {
			let info = this.enumData.find((n) => n.value === data.smallModule);
			return <el-tag size="small">{info.msg}</el-tag>;
		},

		//格式化日志等级
		returnLogLevel(data) {
			let tipsText = null;
			let tipsStatus = null;
			if (data.level === '1') {
				tipsText = '提示';
			} else if (data.level === '2') {
				tipsText = '错误';
				tipsStatus = 'danger';
			} else if (data.level === '3') {
				tipsText = '警告';
				tipsStatus = 'warning';
			} else {
				tipsText = '其他';
				tipsStatus = 'info';
			}
			return this.$createElement('elTag', { attrs: { size: 'medium', type: tipsStatus } }, tipsText);
		},

		//查看详情
		handleLookDetail(data) {
			let info = this.enumData.find((n) => n.value === data.smallModule);
			this.detailData = { ...data, moduleName: `${info.msg} / ${data.description}` };
			this.detailDialog = true;
		}
	}
};
</script>
